<template>
  <div class="url-picture-upload">
    <a-input-group compact style="margin-bottom: 16px">
      <a-input
        v-model:value="fileUrl"
        style="width: calc(100% - 120px)"
        placeholder="请输入图片 URL"
      />
      <a-button type="primary" :loading="loading" @click="handleUpload" style="width: 120px"
        >提交</a-button
      >
    </a-input-group>
    <img v-if="picture?.url" :src="picture?.url" alt="avatar" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { uploadPictureByUrlUsingPost } from '@/api/pictureController'

// 定义组件接收的属性类型
interface Props {
  // 图片对象
  picture?: API.PictureVO
  // 成功回调
  onSuccess?: (newPicture: API.PictureVO) => void
}

// 使用 defineProps 定义组件的 props
const props = defineProps<Props>()

//图片上传的加载状态
const loading = ref<boolean>(false)
// 存储图片的文件 URL
const fileUrl = ref<string>()

/**
 * 处理图片上传的函数
 */
const handleUpload = async () => {
  // 开始上传
  loading.value = true
  try {
    // 图片上传请求的参数对象
    const params: API.PictureUploadRequest = { fileUrl: fileUrl.value }
    // 如果 props 中包含图片对象，则将其 ID 添加到请求参数中
    if (props.picture) {
      params.id = props.picture.id
    }
    // 异步调用上传图片
    const res = await uploadPictureByUrlUsingPost(params)

    if (res.data.code === 0 && res.data.data) {
      message.success('图片上传成功')
      props.onSuccess?.(res.data.data)
    } else {
      message.error('图片上传失败，' + res.data.message)
    }
  } catch (error) {
    message.error('图片上传失败')
  } finally {
    // 无论上传成功还是失败，都将加载状态设置为 false
    loading.value = false
  }
}
</script>
<style lang="scss" scoped></style>
